<canvas width="800" height="600"></canvas>
<script>

var _2d=document.querySelector("canvas").getContext("2d");
var box_round=function(x,y,w,h,r,fill,border){
  _2d.save();
  if(w>=r*2){
    _2d.beginPath();
    _2d.moveTo(x+r,y);
    _2d.arcTo(x+w,y,  x+w,y+h,r);
    _2d.arcTo(x+w,y+h,x,  y+h,r);
    _2d.arcTo(x,  y+h,x,  y,  r);
    _2d.arcTo(x,  y,  x+w,y,  r);
    if(fill){ _2d.fill(); }
    if(border){ _2d.stroke(); }
  }else{
    var left=x,right=x+w,top=y,bottom=y+h;
    _2d.beginPath();
    _2d.moveTo(right,bottom);
    _2d.arcTo(left,bottom,left,top,r);
    _2d.arcTo(left,top,right,top,r);
    _2d.lineTo(right,top);
    _2d.clip();
    _2d.beginPath();
    _2d.moveTo(left,top);
    _2d.arcTo(right,top,right,bottom,r);
    _2d.arcTo(right,bottom,left,bottom,r);
    _2d.lineTo(left,bottom);
    _2d.clip();
    if(fill){
      _2d.fill();
    }
    if(border){
      _2d.stroke();
      _2d.beginPath();
      _2d.moveTo(right,bottom);
      _2d.arcTo(left,bottom,left,top,r);
      _2d.arcTo(left,top,right,top,r);
      _2d.lineTo(right,top);
      _2d.stroke();
    }
  }
  _2d.restore();
};
// _2d.beginPath();
// _2d.moveTo(30,10);
// _2d.lineTo(30,10+300);
// _2d.moveTo(100,10);
// _2d.lineTo(100,10+300);
// _2d.stroke();
box_round(20,20,100,300,150,false,true);

// _2d.stroke();
// _2d.moveTo(20+150,20);
// _2d.arcTo(20+200,20,20+200,20+300,150);
// _2d.stroke();

</script>